import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, ImageBackground, Platform, Image, FlatList, StatusBar, TextInput, ScrollView, Picker} from 'react-native';
import { base } from "../../../../assets/style";
import SegmentedControlTab from "react-native-segmented-control-tab";
import Toast from "react-native-easy-toast";
import Loading from '../../../../components/loading/Loading'
import { API } from "../../../../api";
import { getLocalTime } from "../../../../utils/utils";
import { reType } from "../../../../config";
import { i18n } from "../../../../utils/locales/i18n";

type Props = {};
export default class Record extends Component<Props> {
    static navigationOptions = () => {
        return {
            header: null,
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    }
    constructor() {
        super();
        this.state = {
            bind: true,
            selectedIndex: 0,
            rechargeData: '',
            withdrawData: '',

            currentToastInfo: '',
            modalVisible: false,
            // 下拉刷新
            isRefresh:false,
        }
    }
    componentDidMount = async () => {
        await this._getRechargeData()
    }
    _changeTab = (index) => {
        this.setState({
            selectedIndex: index
        })
        setTimeout(() => {
            this.refs.list.scrollToOffset({ index: 0 })
        }, 0)
    }
    // 充提币记录
    _getRechargeData = async () => {
        this.setState({ modalVisible: true, currentToastInfo: i18n.t('loading') })
        const [res1, res2] = await Promise.all([
            API._fetch('getRechargeRecord', {}, 'GET'),
            API._fetch('getWithdrawRecord', {}, 'GET')
        ])
        this.setState({ modalVisible: false, currentToastInfo: i18n.t('loading') })
        if (res1 && res2) {
            this.setState({
                rechargeData: res1.data,
                withdrawData: res2.data
            })
        }
    }

    // AddrDesc: "Wsnd"
    // Confirm: 0
    // Created: 1547087175
    // Fee: 10
    // Id: 44
    // Remark: "Eqewq"
    // SerialNum: "8e5cecf4ebc4a825"
    // Sname: ""
    // State: 0
    // Token: "fcc"
    // TxHash: ""
    // Uid: 17
    // WithAddr: "12e8ef7d4ffdb1f37134932f3662f7d4135ba5b245"
    // WithSum: 21
    _onRefresh = async () => {
        await this._getRechargeData()
    }
    render() {
        return (
            <View style={[base.flex_1, base.bg_white]}>
                {/*toast*/}
                <Toast ref="toast" position='bottom' positionValue={200}/>
                { this.state.modalVisible ? (
                    <Loading
                        info={this.state.currentToastInfo}
                    />) : null }
                <View style={{
                    height: Platform.OS === 'ios' ? 90 : 70,
                    paddingTop: Platform.OS === 'ios' ? 20 : 0,
                    width: '100%',
                    backgroundColor: '#fff',
                    justifyContent: 'center',
                    alignItems: 'center',
                    position: 'relative'
                }}>
                    <TouchableOpacity style={{ position: 'absolute', right: 10, zIndex: 999, top: Platform.OS === 'ios' ? 48 : 22 }} onPress={() => this.props.navigation.goBack()}>
                        <Text style={{ color: '#ff7606', fontSize: 17 }}>{ i18n.t('back') }</Text>
                    </TouchableOpacity>
                    <View style={{width: '50%'}}>
                        <SegmentedControlTab
                            values={[i18n.t('r_record'), i18n.t('w_record')]}
                            selectedIndex={this.state.selectedIndex}
                            tabStyle={{backgroundColor: '#fff', borderColor: '#ff7706', borderWidth: 1 }}
                            activeTabStyle={{backgroundColor: '#ff7706'}}
                            tabTextStyle={{color: '#ff7706', fontSize: 16}}
                            activeTabTextStyle={{color: '#fff'}}
                            onTabPress={(index) => this._changeTab(index)}
                        />
                    </View>
                </View>
                <View style={[base.flex_1, base.bg_gray, { paddingHorizontal: 10, paddingVertical: 15 }]}>
                    <FlatList
                        data={this.state.selectedIndex === 0 ? this.state.rechargeData : this.state.withdrawData}
                        ref={'list'}
                        onRefresh={() => this._onRefresh()}
                        refreshing={this.state.isRefresh}
                        ListEmptyComponent={() => {
                            return (
                                <View style={[base.flex_col_center, base.flex_1, {width: '100%', paddingTop: 100}]}>
                                    <Image style={{width: 200, height: 190}} source={require('@images/mine/empty.png')}/>
                                    <View style={{paddingTop: 30}}>
                                        <Text style={[base.color_orange]}>暂无数据...</Text>
                                    </View>
                                </View>
                            )
                        }}
                        renderItem={
                            ({item}) => {

                                // AddrDesc: "Wsnd"
                                // Confirm: 0
                                // Created: 1547087175
                                // Fee: 10
                                // Id: 44
                                // Remark: "Eqewq"
                                // SerialNum: "8e5cecf4ebc4a825"
                                // Sname: ""
                                // State: 0
                                // Token: "fcc"
                                // TxHash: ""
                                // Uid: 17
                                // WithAddr: "12e8ef7d4ffdb1f37134932f3662f7d4135ba5b245"
                                // WithSum: 21

                                return (
                                    <View style={[{ backgroundColor: '#fff', width: '100%', borderRadius: 8, paddingHorizontal: 10, paddingVertical: 15, marginBottom: 10 }]}>
                                        <View style={[base.flex_row_between]}>
                                            <Text style={{ fontSize: 18 }}>{this.state.selectedIndex === 0 ? item.RechSum : item.WithSum} FCC</Text>
                                            <Text style={[base.color_orange, { fontSize: 20 }]}>{reType[Number(item.State)]}</Text>
                                        </View>
                                        <View style={[base.flex_row_between, { width: '100%' }]}>
                                            <View style={[base.flex_col_center]}>
                                                <View style={[base.flex_row_start, base.color_gray, { width: '100%' }]}>
                                                    <Text style={[base.color_gray, { fontSize: 14 }]}>{ i18n.t('s_time') }  </Text>
                                                    <Text style={[base.color_gray, { fontSize: 14 }]}>{getLocalTime(item.Created)}</Text>
                                                </View>
                                                <View style={[base.flex_row_start, base.color_gray, { width: '100%' }]}>
                                                    <Text style={[base.color_gray, { fontSize: 14 }]}>{ i18n.t('c_time') }  </Text>
                                                    <Text style={[base.color_gray, { fontSize: 14 }]}>{item.Confirm ? getLocalTime(item.Confirm) : '----'}</Text>
                                                </View>
                                            </View>
                                        </View>
                                        <View style={[base.flex_row_start, base.color_gray, { width: '100%' }]}>
                                            <Text style={[base.color_gray, { fontSize: 14 }]}>{ i18n.t('t_hash') }  </Text>
                                            <Text style={[base.color_gray, { fontSize: 14, width: '50%' }]} numberOfLines={1} ellipsizeMode={'middle'}>{item.TxHash ? item.TxHash : '----'}</Text>
                                        </View>
                                    </View>
                                )
                            }
                        }/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
